
<!DOCTYPE html>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<html>

<head>
  <meta charset="utf-8">
  <title>ReportGPT</title>
  <style>
    body {
      background-color: #303030;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #70afce;
    }

    h1 {
      margin-top: 0;
    }

    form {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 30px;
    }

    form * {
      box-sizing: border-box;
      margin: 10px;
      padding: 10px;
      border: none;
      border-radius: 5px;
      box-shadow: 0 0 10px #70afce;
      font-size: 16px;
    }

    input[type="file"] {
      display: inline-flex;
    }

    input[type="submit"] {
      background-color: #70afce;
      color: #303030;
      font-weight: bold;
      cursor: pointer;
    }

    a {
      background-color: #70afce;
      border: 1px solid #70afce;
      color: #303030;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
    }

    a:hover {
      background-color: #70afce;
      color: #303030;
    }

    kbd {
      display: inline-block;
      font-family: sans-serif;
      background-color: #70afce;
      color: #303030;
      border-radius: 3px;
      padding: 5px;
      font-size: 14px;
      text-align: center;
      transition: all 0.1s ease-in-out;
    }

    kbd:hover {
      background-color: #e7e7e7;
      border-color: #bbb;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #f7f7f7 inset;
    }

    .highlight {
      background-color: #ffffff;
      border-color
: #f5f5f5;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #f7f7f7 inset;
    }

    /* Added new class for button styling */
    .button {
      background-color: #70afce;
      color: #303030;
      font-weight: bold;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      box-shadow: 0 0 10px #70afce;
      font-size: 16px;
      padding: 10px;
      margin: 10px;
    }

    /* Added new class for input styling */
    input[type="file"] {
      display: none;
    }

    /* Added new class for label styling */
    label {
      display: inline-block;
      background-color: #70afce;
      color: #303030;
      font-weight: bold;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 10px #70afce;
      font-size: 16px;
      cursor: pointer;
    }

    /* Added new class for form styling */
    .form {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 30px;
    }

    /* Added new class for paragraph styling */
    p {
      margin: 10px;
      font-size: 16px;
    }

    /* Added new class for header styling */
    .header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
    }

    /* Added new class for main styling */
    main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    /* Added new class for success message styling */
    .success-message {
      background-color: #70afce;
      color: #303030;
      font-weight: bold;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 10px #70afce;
      font-size: 16px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <header class="header">
    <h1>金融小白摸鱼神器</h1>
  </header>

  <main>
    <div>
      <p>在一个月黑风高的夜晚......
      <p>你的行长又打来了催命连环call,“你的调查报告到底写完了没有，刷个数据要这么半天吗？”</p>

      <p>你看了看时间，已经刷了3个小时的剧，是该干点正事了...</p>
    </div>
    <h2>第1步</h2>
    <p>把财务数据填到<label for="download-template" class="button">下载模板</label>的【模板.xlsx】里面，记得按保存，<font color="yellow">不要改文件名</font>。或者你可以先<label for="download-sample" class="button">下载样品</label>来看看</p>
    <form>
      <input type="hidden" id="download-template" />
      <input type="hidden" id="download-sample" />
    </form>
    <h2>第2步</h2>
    <p>点下面的<label for="upload-file" class="button highlight">选择文件</label>，把你填好的报表传上来<label for="upload-file" class="button">上传报表</label></p>
    <form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data" class="form">
      <input type="file" name="file" id="upload-file">
      <input type="submit" value="上传报表" class="button">
    </form>

    {% if success %}
    <div class="success-message">
      上传成功！
    </div>
    {% endif %}

    <h2>第3步</h2>
    <p>一手交钱，一手交货，点完<label for="generate-report" class="button">生成报告</label>后耐心等待10秒钟</p>
    <form>
      <input type="hidden" id="generate-report" />
    </form>
  </main>
</body>

</html>
